<template>
	<view class="ssha-dropdown-select">
		<span v-if="leftLabel" class="ssha-label">{{leftLabel}}</span>
		<view class="ssha-content" :class="{'ssha-actived': current}">
			<view class="uni-select" :class="{'uni-select--disabled':disabled}">
				<view class="uni-select__input-box" @click="toggleSelector">
					<input v-if="search" @input="searchName" @focus="focus=true" @blur="focus=false" :v-model="focus ? searchKey : current" class="uni-select__input-text"  :placeholder="focus ? current : typePlaceholder" placeholder-class="uni-select__input-placeholder" />
					<block v-else >
						<input disabled v-if="current" :value="current" class="uni-select__input-text" />
						<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
					</block>
					<view v-if="current && clear && !disabled" @click.stop="clearVal1">
						<uni-icons type="clear" color="#c0c4cc" size="24" />
					</view>
					<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
				</view>
				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
				<view class="uni-select__selector" v-if="showSelector">
					<view class="uni-popper__arrow"></view>
					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
						<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
							<text>{{emptyTips}}</text>
						</view>
						<tree :data="mixinDatacomResData" :dataKey="label" :arrayKey="arrayKey" :childrenKey="childrenKey" :jointkey="jointkey" :disable="disable"
							@itemClick="itemClick" :slotKey="slotKey">
						</tree>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	/**
	 * SshaDropdownSelect 下拉筛选
	 * @description 通过数据渲染的下拉框组件,可输入关键词搜索
	 * @tutorial https://xxxxx
	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
	 * @property {String} value 默认值
	 * @property {Boolean} clear 是否可以清空已选项
	 * @property {Boolean} emptyText 没有数据时显示的文字
	 * @property {String} label 左侧标题
	 * @property {String} placeholder 输入框的提示文字
	 * @property {Boolean} disabled 是否禁用
	 * @property {String} valuekey 取值字段
	 * @property {String} jointkey 拼接在label前的内容
	 * @property {Boolean} search 是否使用输入搜索功能 
	 * @property {String} childrenKey 下级菜单disable 
	 * @property {String} disable 禁用标识
	 * @event {Function} change  选中发生变化触发
	 * @event {Function} changeItem  选中发生变化触发
	 */
	import Tree from './tree.vue'
	export default {
		name: "ssha-dropdownSelect",
		mixins: [uniCloud.mixinDatacom || {}],
		props: {
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			leftLabel:{
				type: String,
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			modelValue: {
				type: [String, Number],
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			emptyTips: {
				type: String,
				default: '无选项'
			},
			clear: {
				type: Boolean,
				default: true
			},
			defItem: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
			format: {
				type: String,
				default: ''
			},
			valuekey: {
				type: String,
				default: 'id'
			},
			jointkey: {
				type: String,
				default: ''
			},
			//是否可以输入搜索
			search: {
				type: Boolean,
				default: false
			},
			arrayKey:{
				type: String,
				default: 'id'
			},
			childrenKey:{
				type: String,
				default: 'children'
			},
			disable:{
				type: String,
				default: 'disable'
			},
			slotKey:{
				type: Array,
				default () {
					return []
				}
			}
		},
		components: {
			Tree,
		},
		data() {
			return {
				showSelector: false,
				focus:false,
				searchKey:'',
				current: '',
				mixinDatacomResData: [],
				cacheKey: "uni-ssha-lastSelectedValue",
			};
		},
		created() {
			this.debounceGet = this.debounce(() => {
				this.query();
			}, 300);
			if (this.collection && !this.localdata.length) {
				this.debounceGet();
			}
		},
		computed: {
			typePlaceholder() {
				const text = {
					'opendb-stat-app-versions': '版本',
					'opendb-app-channels': '渠道',
					'opendb-app-list': '应用'
				}
				const common = this.placeholder
				const placeholder = text[this.collection]
				return placeholder ?
					common + placeholder :
					common
			},
			valueCom() {
				// #ifdef VUE3
				return this.modelValue;
				// #endif
				// #ifndef VUE3
				return this.value;
				// #endif
			}
		},
		watch: {
			localdata: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {
						this.mixinDatacomResData = val
					}
				}
			},
			valueCom(val, old) {
				this.initDefVal()
			},
			mixinDatacomResData: {
				immediate: true,
				handler(val) {
					if (val.length) {
						this.initDefVal()
					}
				}
			}
		},
		methods: {
			itemClick(item) {
				if (!item.disable) {
					this.showSelector = false
					this.current = this.formatItemName(item)

					let val = item[this.valuekey];
					this.$emit('input', val)
					this.$emit('update:modelValue', val)
					this.$emit('change', val);
					this.$emit('changeItem',item);
					 
					if (this.collection) {
						this.setCache(val);
					}
				}
				if(this.search){
					this.searchKey = '';
					this.mixinDatacomResData = this.copyObj(this.localdata);
				}
			},
			clearVal1() {
				this.current = '';
				let val = '';
				this.$emit('input', val)
				this.$emit('update:modelValue', val)
				this.$emit('change', val)
				this.$emit('changeItem','');
				
				if(this.search){
					this.searchKey = '';
					this.mixinDatacomResData = this.copyObj(this.localdata);
				}
			},
			debounce(fn, time = 100) {
				let timer = null
				return function(...args) {
					if (timer) clearTimeout(timer)
					timer = setTimeout(() => {
						fn.apply(this, args)
					}, time)
				}
			},
			// 执行数据库查询
			query() {
				this.mixinDatacomEasyGet();
			},
			// 监听查询条件变更事件
			onMixinDatacomPropsChange() {
				if (this.collection) {
					this.debounceGet();
				}
			},
			initDefVal() {
				let defValue = ''
				if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
					defValue = this.valueCom
				} else {
					let strogeValue
					if (this.collection) {
						strogeValue = this.getCache()
					}
					if (strogeValue || strogeValue === 0) {
						defValue = strogeValue
					} else {
						let defItem = ''
						if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
							defItem = this.mixinDatacomResData[this.defItem - 1].value
						}
						defValue = defItem
					}
					if (defValue || defValue === 0) {
						this.emit(defValue)
					}
				}
				let def = '';
				var ths = this;
				if (defValue) {
					try{
						this.mixinDatacomResData.forEach(item => {
							if (item[ths.valuekey] == defValue) {
								def = item;
								throw Error();
							}
							def = ths.findChilden(item,defValue,def);
							if(def)throw Error();
						});
					}catch(e){
						 
					}
				}
				this.current = def ? this.formatItemName(def) : ''
				 
			},
			findChilden(item,defValue,def){
				var ths = this;
				if (item.children && !def) {
					try{
						item.children.forEach(item1 => {
							if (item1[ths.valuekey] == defValue) {
								def = item1;
								throw Error();
							}
							def = ths.findChilden(item1,defValue);
							if(def)throw Error();
						});
					}catch(e){
						
					}
				} 
				return def;
			},

			/**
			 * @param {[String, Number]} value
			 * 判断用户给的 value 是否同时为禁用状态
			 */
			isDisabled(value) {
				let isDisabled = false;
				this.mixinDatacomResData.forEach(item => {
					if (item.value === value) {
						isDisabled = item.disable
					}
				})
				return isDisabled;
			},

			clearVal() {
				this.emit('')
				if (this.collection) {
					this.removeCache()
				}
			},
			change(item) {
				if (!item.disable) {
					this.showSelector = false
					this.current = this.formatItemName(item)
					this.emit(item.value)
				}
			},
			emit(val) {
				this.$emit('input', val)
				this.$emit('update:modelValue', val)
				this.$emit('change', val)
				if (this.collection) {
					this.setCache(val);
				}
			},
			toggleSelector() {
				if (this.disabled) {
					return
				}
				this.showSelector = !this.showSelector
			},
			formatItemName(item) {
				let {
					text,
					value,
					channel_code
				} = item
				channel_code = channel_code ? `(${channel_code})` : ''

				if (!text) text = item[this.label];
				if (!value) value = item[this.valuekey];
				if (text && this.jointkey && item[this.jointkey]) text = item[this.jointkey]+'' +text ;

				if (this.format) {
					// 格式化输出
					let str = "";
					str = this.format;
					for (let key in item) {
						str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
					}
					return str;
				} else {
					return this.collection.indexOf('app-list') > 0 ?
						`${text}(${value})` :
						(
							text ?
							text :
							`未命名${channel_code}`
						)
				}
			},
			// 获取当前加载的数据
			getLoadData() {
				return this.mixinDatacomResData;
			},
			searchName(e){
				this.searchKey = e.detail.value;
				if(!this.searchKey){
					this.mixinDatacomResData = this.copyObj(this.localdata);
				}else{
					let list=[];
					var ths = this;
					let listData = this.copyObj(this.localdata);
					try {
						listData.forEach(item => {
							if (item[ths.label].indexOf(ths.searchKey) > -1) {
								list.push(item);
							}
							ths.searchListByName(list,item);
						})
						this.mixinDatacomResData = list;
					} catch (e) {
						
					}
				}
			},
			searchListByName(list,item){
				var ths = this;
				try {
					if (item.children) {
						item.children.forEach(item1 => {
							if (item1[ths.label].indexOf(ths.searchKey) > -1) {
								list.push(item1);
							}
							 ths.searchListByName(list,item1);
						});
					}
				} catch (e) {
					
				}
			},
			
			// 获取当前缓存key
			getCurrentCacheKey() {
				return this.collection;
			},
			// 获取缓存
			getCache(name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				return cacheData[name];
			},
			// 设置缓存
			setCache(value, name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				cacheData[name] = value;
				uni.setStorageSync(this.cacheKey, cacheData);
			},
			// 删除缓存
			removeCache(name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				delete cacheData[name];
				uni.setStorageSync(this.cacheKey, cacheData);
			},
			// 函数拷贝
			copyObj(obj){
			    let objClone =  Array.isArray(obj) ? [] : {};
			    // 判断是否需要继续进行递归
			    if(obj && typeof obj == 'object'){
			        // 进行下一层递归克隆
			        for(var key in obj){
			    		if(obj.hasOwnProperty(key)){
			    			if(obj[key] &&  typeof obj[key] == 'object'){
			    				objClone[key] = this.copyObj(obj[key]);
			    			}else{
			    				objClone[key] = obj[key];
			    			}
			    		}
			        }
			    }
			    return objClone
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	@media screen and (max-width: 500px) {
		.hide-app {
			display: none;
		}
	}
	/* #endif */
	
	.ssha-dropdown-select {
		display: flex;
		align-items: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		
		.ssha-label{
			font-size: 14px;
			font-weight: bold;
			color: #6a6a6a;
			margin: auto 0;
			margin-right: 5px;
		}
		.ssha-content{
			width: 100%;
			flex: 1;
		}
		.ssha-actived {
			width: 100%;
			flex: 1;
		}
	}

	.uni-select {
		font-size: 14px;
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		user-select: none;
		/* #endif */
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 35px;

		&--disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}
	}

	.uni-select__label {
		font-size: 16px;
		height: 35px;
		padding-right: 10px;
		color: #909399;
	}

	.uni-select__input-box {
		height: 35px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.uni-select__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
	}

	.uni-select__input-plac {
		font-size: 14px;
		color: #909399;
	}

	.uni-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 3;
		padding: 4px 0;
	}

	.uni-select__selector-scroll {
		/* #ifndef APP-NVUE */
		max-height: 200px;
		box-sizing: border-box;
		/* #endif */
	}

	/* #ifdef H5 */
	@media (min-width: 768px) {
		.uni-select__selector-scroll {
			max-height: 600px;
		}
	}
	/* #endif */

	.uni-select__selector-empty,
	.uni-select__selector-item {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		line-height: 35px;
		font-size: 14px;
		text-align: center;
		padding: 0px 10px;
	}

	.uni-select__selector-item:hover {
		background-color: #f9f9f9;
	}

	.uni-select__selector-empty:last-child,
	.uni-select__selector-item:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	.uni-select__selector__disabled {
		opacity: 0.4;
		cursor: default;
	}

	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-select__input-text {
		width: 100%;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow: hidden;
		font-size: 14px;
	}
	.uni-select__input-placeholder {
		color:#6a6a6a;
		font-size: 12px !important;
	}

	.uni-select--mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 2;
	}
</style>